<template>
  <div class="operate-proc-list-box-ai">
    <div class="mb-10"><span class="text-red" >*</span>{{$t('basicData.processVer')}}</div>
    <div class="mb-10 flex proc-version-ai-box" >  
      <div>
        <div class="width-70"> 
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="version" @change="getProcessDetails" size="large">
            <template #suffixIcon>
              <img src="../../../../assets/images/downArrow.png" alt="" style="width:14px;height:12px">
            </template>  
              <a-select-option v-for="item in processList" :key="item" :value="item.id">
                <span class="block-red"></span> {{item.name}}
              </a-select-option> 
          </a-select> 
        </div>
        <div class="width-25">
          <a-button size="large" v-if="version" @click="onProcEdit">{{$t('common.editor')}}</a-button>
        </div>
      </div> 
      <div></div>
      <div></div>
    </div>
    <header>
      <div v-for="(item, index) in listHeaders" :key="index">
        <span class="text-red" v-if="[ 4, 5, 7].includes(index)">*</span>{{item}}
      </div>
    </header>
    <div >
      <a-form ref="listFormRef" :model="processInfoList" layout="inline">
        <div class="inner-process-list-box mt-12" v-for="(element, index) in  processInfoList" :key="index">
          <div> {{element.sortField}}</div>
          <div> {{element.section}}</div>
          <div> {{element.processNo}}</div>
          <div> {{element.name}} </div>
          <div> 
             <a-form-item  :name="[index, 'standardSeconds']" :rules="processRule.standardSeconds">
              <a-input-number v-model:value="element.standardSeconds" />
            </a-form-item>
          </div>
          <div> {{element.forecastWorkingHours}} </div>
          <div> 
            <a-form-item  :name="[index, 'labourCost']" :rules="processRule.labourCost">
              <a-input-number v-model:value="element.labourCost" />
            </a-form-item>
          </div>
          <div> 
            <a-switch v-model:checked="element.isIntegration" size="small" />
          </div>
          <div>
            <a-form-item  :name="[index, 'professionId']" :rules="processRule.professionId">
              <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="element.professionId" min="0" @change="(val) => onProChange(val, element)">
                <a-select-option v-for="item in professionIdList" :key="item" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div> 
            <a-form-item :name="[index, 'maxStationNo']" :rules="processRule.maxStationNo">
              <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="element.maxStationNo" min="0" allowClear :disabled="![2, 3,'2','3'].includes(element.professionId)">
                <a-select-option v-for="item in maxStationList" :key="item" :value="item.id">{{ item.text }}</a-select-option>
              </a-select>
            </a-form-item> </div>
          <div>
            <a-form-item :name="[index, 'skillGradeId']" >
              <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="element.skillGradeId" min="0" allowClear>
                <a-select-option v-for="item in skillGradeId" :key="item" :value="item.id">{{ item.grade }}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div>
            <a-switch v-model:checked="element.status" :disabled="index===0" size="small" />
          </div>
        </div>
      </a-form>
    </div>
    <UploadModal ref="uploadModalRef" @ok="onImgOk" />
    <EditProcessModal ref="editProcessModal" @ok="onProcOk"/>
  </div>
</template>
<script setup>
import EditProcessModal from '@/views/makeManage/makeProcess/newModules/editProcessModal.vue'
import { listHeaders, processRule ,maxStationAry} from './config'
import {onMounted, ref, watch} from 'vue' 
import axios from "@/utils/request"
import UploadModal from './uploadModal.vue' 
const props = defineProps({  
  moId: { type: String, default: () => '' },
})
let version = ref()
let processInfoList = ref([])
let processList = ref([])
let uploadModalRef = ref()
let professionIdList = ref([])
let skillGradeId = ref([])
let ieRoadmapProcVO = ref([])
let listFormRef = ref()
let editProcessModal = ref()
let maxStationList = ref(maxStationAry) 
const onImgOk = (fileList, index) => {
  processInfoList.value[index].processPictureUrlList = fileList
}
const getProcList = async () => {
  if(!props.moId) return
  try {
    let res = await axios.postAction('/api/mo/mo-proc/list',{moId:props.moId})
    if (res?.success) processList.value = res.data 
  } catch {
    processList.value = []
  } 
}
// 工序详情
const getProcessDetails = async () => { 
  try { 
    const res = await axios.getAction('/api/mo/mo-proc/get-ai-mo-proc-by-id', { id: version.value }) 
    if (res.success) {
      ieRoadmapProcVO.value['name'] = res.data.name;
      res.data.moProcDetailVOList && res.data.moProcDetailVOList.forEach((i,index)=>
        {
          i.status = true,
          i.isIntegration = index != 0 ? true  : false,

          i.standardSeconds = 50,
          i.labourCost = 2.50,
          i.professionId = professionIdList.value[professionIdList.value.length-1]?.id
        }
      )
      processInfoList.value = res.data.moProcDetailVOList;

    } 
  } catch {
    // listLoading.value = false
  }
}
const onProChange = (val, element) => {
  if(![2, 3,'2','3'].includes(val)) element.maxStationNo = undefined 
}

const onProcEdit = ()=> {
  editProcessModal.value.open( { moId: props.moId, processId: version.value })
}
const onProcOk = async () => {
  await getProcList()
  await getProcessDetails()
}
watch( () => props.moId, (newVal) => {
  if(newVal) getProcList() 
},{ deep: true, immediate: true })

onMounted(async ()=>{
  const res = await axios.postAction('/api/basic/profession/list-profession')
  if (res.success){
    professionIdList.value = res.data;
  }
  const resSkill = await axios.postAction('/api/basic/skill-grade/list')
  if (resSkill.success){
    skillGradeId.value = resSkill.data;
  }
})
defineExpose({
  processInfoList,
  ieRoadmapProcVO,
  version,
  listFormRef
})
</script>